<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>羊了个羊</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 关卡选择界面 -->
    <div id="levelSelect" class="level-select">
        <h2>选择关卡</h2>
        <div class="level-buttons">
            <button class="level-btn" data-level="1">第1关</button>
            <button class="level-btn" data-level="2">第2关</button>
            <button class="level-btn" data-level="3">第3关</button>
        </div>
    </div>

    <!-- 游戏主界面 -->
    <div id="gameContainer" class="game-container hidden">
        <div class="game-header">
            <h1>羊了个羊</h1>
            <div class="level-info">第1关</div>
            <button class="back-btn">返回</button>
        </div>
        
        <div class="game-board-container">
            <div class="game-board" id="gameBoard"></div>
        </div>
        
        <div class="slot-area">
            <div class="slot-title">槽位区 (0/7)</div>
            <div class="slots"></div>
        </div>
    </div>

    <!-- 结果界面 -->
    <div id="resultScreen" class="result-screen hidden">
        <h2 class="result-title"></h2>
        <p class="result-message"></p>
        <div class="result-buttons">
            <button class="retry-btn">再试一次</button>
            <button class="next-btn hidden">下一关</button>
            <button class="back-to-levels">选择关卡</button>
        </div>
    </div>

    <script src="game.js"></script>
</body>
</html>